import React,{Component} from 'react'
import './index.css'
import Header from '../../common/Header'
import Recommend from '../../common/Recommend'
import Friend from '../../common/Friend'
import Audio from '../../common/Audio'

import {CSSTransition} from 'react-transition-group'

class Index extends Component{
    constructor(){
        super()
        this.state={
            a : 1 ,
            b : 'tab' ,
            c : true
        }
    }
    change(num){
        //console.log(num)
        this.setState(state=>{
            state.a = num
            return state
        })
    }
    tmp(){
        switch(this.state.a){
            case 1:
                return <Recommend/>
            case 2:
                return <Friend/>
            case 3:
                return <Audio/>
        }
    }
    render(){
        return (
            <div className="app-index">
                <Header></Header>
                <ul>
                    <li className={this.state.a===1 ? this.state.b : ''}  onClick={()=>{this.change(1)}}>推荐</li>
                    <li className={this.state.a===2 ? this.state.b : ''}  onClick={()=>{this.change(2)}}>音乐</li>
                    <li className={this.state.a===3 ? this.state.b : ''}  onClick={()=>{this.change(3)}}>电台</li>
                </ul>
                <div className="app-index-tab">
                    {this.tmp()}
                </div>
            </div>
        )
    }
}

export default Index
